<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表页</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <script src="layui/layui.js"></script>
    <script src="jquery-1.8.2.min.js"></script>
</head>

<body>
<!--	检索框-->
<div class="demoTable">
    姓名
    <div class="layui-inline">
        <!--        检索参数的值，由id选择器获取-->
        <input class="layui-input" id="stuname" autocomplete="off">
    </div>

    班级
    <div class="layui-inline">
        <select class="layui-input" id="classid"
                autocomplete="off">
            <!--            动态加载-->
        </select>
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>
<!--数据表格-->
<table id="demo" lay-filter="test"></table>


<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;

        //加载数据表格
        table.render({
            elem: '#demo',//数据表格的id
            toolbar: '#toolbarDemo',//绑定头部工具栏
            height: 600,//表格高度
            url: 'stu/chaxun.do', //数据接口
            page: true, //开启分页
            cols: [[ //表头
                {
                    field: 'stuid',//绑定返回数据的属性
                    title: '序号',//头部标题
                    width: 80,//宽度
                    fixed: 'left'//靠左
                }, {
                    field: 'name',
                    title: '姓名',
                    width: 150
                }, {
                    field: 'classname',
                    title: '班级',
                    width: 150
                }, {
                    field: 'sex',
                    title: '性别',
                    width: 50
                }, {
                    field: 'phone',
                    title: '电话',
                    width: 150
                }, {
                    field: 'weight',
                    title: '体重',
                    width: 50
                }, {
                    field: 'birthday',
                    title: '生日',
                    width: 150
                }, {
                    fixed: 'right',
                    width: 200,
                    align: 'center',
                    toolbar: '#barDemo'
                } //这里的toolbar值是模板元素的选择器,行内工具栏
            ]]
        });

        //工具条事件，编辑、删除
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    //向服务端发送删除指令
                    $.ajax({
                        url: "delete",
                        type: "get",
                        data: {//参数
                            id: data.id
                        },
                        success: function (res) {
                            if (res.code == 0) {
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            } else {
                                layer.msg("删除失败！");
                            }
                        }
                    });
                    // 关闭弹框
                    layer.close(index);
                });
            } else if (layEvent === 'edit') { //编辑
                //弹出编辑对话框
                layer.open({
                    type: 1,
                    content: $('#update'),//对话框拦截标记
                    title: "编辑",
                    area: ['500px', '500px']
                    //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });
                //加载动态下拉菜单
                caidan();
                //表单重载
                form.render("update");
//              //  回填数据
                //给表单赋值，表单name属性一定要和表头属性一致
                form.val("update", data);
                //修改的提交，**是编辑表单中的拦截器设置
                form.on('submit(**)', function (data) {
                    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                    $.ajax({
                        url: "stu/update.do",
                        type: "get",
                        data: data.field,
                        success: function (res) {
                            layer.msg(res);
                        }
                    });
                    layer.close(layer.index);//关闭弹窗

                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

            }
        });
        //头部事件，添加
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':
                    //打开添加的对话框
                    layer.open({
                        type: 1,
                        content: $('#add'),
                        title: "添加",
                        area: ['500px', '500px']
                        //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    //加载动态下拉菜单
                    caidan();
                    form.render('select', 'add'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
                    //添加的提交，*是添加表单中的拦截器设置
                    form.on('submit(*)', function (data) {
                        console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                        console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                        console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                        $.ajax({
                            url: "stu/add.do",//添加的请求路径
                            type: "get",
                            data: data.field,//数据属性是添加表单的name
                            success: function (res) {
                                layer.msg(res);
                            }
                        });
                        layer.close(layer.index);//关闭弹窗

                        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                    });
                    break;
            }
            ;
        });

        //检索按钮，表格重载
        var $ = layui.$, active = {
            reload: function () {//表格重载
                var demoReload = $('#demoReload');//demoReload是检索表单的id
                //执行重载
                table.reload('demo', {//demo是你的表格的id
                    page: {
                        curr: 1
                        //重新从第 1 页开始
                    },
                    where: {//搜索的参数
                        name: $("#stuname").val(),
                        classid: $("#classid").val()
                    }
                });
            }
        };
        // 检索事件绑定
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //加载动态下拉菜单
        caidan();

    });
</script>

<!-- 表头前的操作 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
<!-- 表单内的操作 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--添加表单,显示隐藏-->
<div id="add" style="display: none">
    <form class="layui-form" lay-filter="add">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required"
                       placeholder="请输入姓名" autocomplete="off" class="layui-input">
                <!-- lay-verify="required"必填 -->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phone" required lay-verify="required"
                       placeholder="请输入手机号" autocomplete="off" class="layui-input">
                <!-- lay-verify="required"必填 -->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">班级</label>
            <div class="layui-input-block">
                <select class="layui-input" name="classid" id="addclass" autocomplete="off">
                    //动态加载
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="text" name="sex" required lay-verify="required"
                       placeholder="请输入性别" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">体重</label>
            <div class="layui-input-block">
                <input type="text" name="weight" required lay-verify="required"
                       placeholder="请输入体重" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
                <input class="layui-input" name="birthday" id="birthday" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--编辑表单,显示隐藏-->
<div id="update" style="display: none">
    <form class="layui-form" lay-filter="update">
        <div class="layui-form-item">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-block">
                <input type="text" name="stuid" required lay-verify="required"
                       autocomplete="off" class="layui-input" readonly>
                <!-- lay-verify="required"必填 -->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required"
                       placeholder="请输入姓名" autocomplete="off" class="layui-input">
                <!-- lay-verify="required"必填 -->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phone" required lay-verify="required"
                       placeholder="请输入手机号" autocomplete="off" class="layui-input">
                <!-- lay-verify="required"必填 -->
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">班级</label>
            <div class="layui-input-block">
                <select class="layui-input" name="classid" id="updateclass" autocomplete="off">
                    //动态加载
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="text" name="sex" required lay-verify="required"
                       placeholder="请输入性别" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">体重</label>
            <div class="layui-input-block">
                <input type="text" name="weight" required lay-verify="required"
                       placeholder="请输入体重" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日</label>
            <div class="layui-input-block">
                <input class="layui-input" name="birthday" id="updatebirthday" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="**">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    //日期控件
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        var $ = layui.$;
        //执行一个laydate实例
        laydate.render({
            elem: '#birthday'//指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#updatebirthday'//指定元素
        });


    });

    // 动态下拉菜单
    function caidan() {
        $.ajax({
            url: "class/chaxun.do",
            type: "get",
            success: function (res) {
                var list = JSON.parse(res);
                $("#classid").empty();
                $("#addclass").empty();
                $("#updateclass").empty();
                $("#classid").append("<option value=''>全部</option>");
                for (c in list) {
                    $("#classid").append("<option value = '" + list[c].classid + "'>" + list[c].classname + "</option>");
                    $("#addclass").append("<option value = '" + list[c].classid + "'>" + list[c].classname + "</option>");
                    $("#updateclass").append("<option value = '" + list[c].classid + "'>" + list[c].classname + "</option>");

                }
            }
        });
    }

</script>

</body>
</html>